<script setup lang="ts">
  import { getOrderStatusQty } from '@/api/order'
  import { TabsPaneContext } from 'element-plus'
  import { computed, ref } from 'vue'
  import { HMessageBox } from '@/components/common/message'

  const emits = defineEmits<{
    (e: 'changeStatus', value: number, value2: number): void
  }>()

  // 当前选中的标签
  const activeName = ref(0)
  const activeChildName = ref(0)
  //工单状态数量数据
  const orderStatusQtyData = ref<OrderListStatusQty>({
    totalOrder: 0,
    waitDispatch: 0,
    waitNetworkHandlerOrder: 0,
    handlerOrder: 0,
    statementReview: 0,
    finishOrder: 0,
    cancelOrder: 0,
    waitNetworkReceivingOrderQty: 0,
    waitNetworkDispatchOrderQty: 0,
    waitEngineerReceivingOrderQty: 0,
    feeWaitCheckQty: 0,
    spareWaitCheckQty: 0,
    notOpenTicketCount: 0,
    notPaymentStatusCount: 0,
    openTicketCount: 0,
    openTicketTotalCount: 0,
    paymentStatusCount: 0,
    paymentStatusTotalCount: 0,
    snCodeWaitCheckCount: 0,
    waitCallPhoneQty: 0,
    waitReservationQty: 0,
    waitSignQty: 0,
    snCodeWarrantyDateWaitCheckCount: 0,
  })

  // 标签选项卡
  const tabPanes = [
    { name: 0, txt: '全部工单', qtyKey: 'totalOrder' },
    { name: 1, txt: '待派单', qtyKey: 'waitDispatch' },
    { name: 2, txt: '待部门处理', qtyKey: 'waitNetworkHandlerOrder' },
    { name: 3, txt: '处理中', qtyKey: 'handlerOrder' },
    { name: 1001, txt: '结单审核', qtyKey: 'statementReview' },
    { name: 4, txt: '已完成', qtyKey: 'finishOrder' },
    { name: 1040, txt: '收款', qtyKey: 'paymentStatusTotalCount' },
    { name: 1020, txt: '发票', qtyKey: 'openTicketTotalCount' },
    { name: 5, txt: '已取消', qtyKey: 'cancelOrder' },
  ]

  /**
   * 子状态遍历列表
   */
  const childStatusOptionList = computed(() => {
    if (activeName.value === 2) {
      return [
        { name: 0, txt: '全部', qtyKey: 'waitNetworkHandlerOrder' },
        { name: 1, txt: '部门未接单', qtyKey: 'waitNetworkReceivingOrderQty' },
        { name: 2, txt: '部门未派单', qtyKey: 'waitNetworkDispatchOrderQty' },
        { name: 3, txt: '工程师未接单', qtyKey: 'waitEngineerReceivingOrderQty' },
      ]
    }

    if (activeName.value === 3) {
      return [
        { name: 0, txt: '全部', qtyKey: 'handlerOrder' },
        // { name: 1, txt: '未拨打电话' },
        // { name: 2, txt: '未预约' },
        // { name: 3, txt: '未签到' },
        { name: 4, txt: '费用待审核', qtyKey: 'feeWaitCheckQty' },
        { name: 5, txt: '物料待审核', qtyKey: 'spareWaitCheckQty' },
        { name: 6, txt: '序列号待审核', qtyKey: 'snCodeWaitCheckCount' },
      ]
    }

    if (activeName.value === 1020) {
      return [
        { name: 0, txt: '全部', qtyKey: 'openTicketTotalCount' },
        { name: 2, txt: '已申请开票', qtyKey: 'openTicketCount' },
        { name: 1, txt: '未开票', qtyKey: 'notOpenTicketCount' },
      ]
    }

    if (activeName.value === 1040) {
      return [
        { name: 0, txt: '全部', qtyKey: 'paymentStatusTotalCount' },
        { name: 2, txt: '已收款', qtyKey: 'paymentStatusCount' },
        { name: 1, txt: '未收款', qtyKey: 'notPaymentStatusCount' },
      ]
    }

    return []
  })

  // 导航切换
  const tabClick = (tab: TabsPaneContext) => {
    activeName.value = Number(tab)
    activeChildName.value = 0
    emits('changeStatus', activeName.value, activeChildName.value)
  }
  const tabClickChild = (tab: TabsPaneContext) => {
    activeChildName.value = Number(tab)
    emits('changeStatus', activeName.value, activeChildName.value)
  }
  // 获取工单列表状态数量
  const getOrderStatusQtyData = async () => {
    const res = await getOrderStatusQty()
    if (res.data.success) {
      orderStatusQtyData.value = res.data.data.row
    } else {
      HMessageBox.error(res.data.message)
    }
  }

  defineExpose({
    getOrderStatusQtyData,
    setTabs: (status: 0 | 1 | 2 | 3 | 4 | 5 | 1001 | 1020 | 1040) => {
      activeName.value = status
    },
    setChildTabs: (
      status: 0 | 1 | 2 | 3 | 4 | 5 | 1001 | 1020 | 1040,
      childStatus: 0 | 1 | 2 | 3 | 4 | 5 | 6,
    ) => {
      activeName.value = status
      activeChildName.value = childStatus
    },
  })
</script>

<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabClick">
      <el-tab-pane v-for="item in tabPanes" :key="item.txt" :name="item.name">
        <template #label>
          <span>{{ `${item.txt}(${orderStatusQtyData[item.qtyKey] || 0})` }}</span>
        </template>
      </el-tab-pane>
    </el-tabs>
    <div v-if="[2, 3, 1020, 1040].includes(activeName)" style="display: flex; align-items: center">
      筛选：&nbsp;&nbsp;
      <el-tabs v-model="activeChildName" class="demo-tabs-child" @tab-change="tabClickChild">
        <el-tab-pane v-for="item in childStatusOptionList" :key="item.txt" :name="item.name">
          <template #label>
            <span>{{ `${item.txt}(${orderStatusQtyData[item.qtyKey] || 0})` }}</span>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .demo-tabs {
    :deep(.el-tabs__header) {
      margin: 0 0 8px !important;

      .el-tabs__nav-wrap {
        .el-tabs__nav {
          .el-tabs__item.is-top:nth-child(2) {
            padding-left: 0;
          }
        }
      }
    }

    :deep(.el-tabs__nav-wrap::after) {
      height: 1px;
    }
  }

  .demo-tabs-child {
    &.el-tabs {
      --el-tabs-header-height: 26px;
    }

    :deep(.el-tabs__header) {
      margin: 0 0 2px;

      .el-tabs__nav-wrap {
        .el-tabs__nav {
          .el-tabs__item {
            padding: 0 10px;
            font-size: 12px;
          }

          .el-tabs__item.is-top:nth-child(2) {
            padding-left: 0;
          }
        }

        &::after {
          display: none;
        }
      }
    }

    :deep(.el-tabs__nav-wrap::after) {
      height: 1px;
    }
  }
</style>
